<template>
	<view class="tab-box">
		<z-nav-bar>
			<view style="width: 600rpx">
				<search-box @search="searchData"></search-box>
			</view>
		</z-nav-bar>
		<view class="top-tabs flex_fsc">
			<view
				v-for="(tab, tindex) in topTextObj"
				:key="tindex"
				class="item"
				:style="{ color: tabIndex === tindex ? '#1A2233' : ' #909399', 'font-weight': tabIndex === tindex ? 700 : 400 }"
				@click="switchTab(tindex)"
			>
				{{ tab.text }}
			</view>
			<view class="bottom-line" :style="{ left: topTextObj[tabIndex].left + 'rpx' }"></view>
		</view>
	</view>
	<swiper
		class="swiper uni-mt-20"
		:style="{ height: `calc(100vh - 20rpx - ${topHeight}px)` }"
		:current="tabIndex"
		@change="changTabIndex"
	>
		<swiper-item v-for="(dataItem, dindex) in data" :key="dindex">
			<scroll-view
				:style="{ height: `calc(100vh - 20rpx - ${topHeight}px)` }"
				scroll-y
				@scrolltolower="nextPage(dindex)"
				refresher-enabled="true"
				:refresher-triggered="data[dindex].triggered"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
			>
				<view v-if="dindex === 0" class="box">
					<view class="title flex_sbc">
						<view>我的所有教学课程</view>
						<view class="button" @click="edit()">新建课程</view>
					</view>
					<view v-if="dataItem.list && dataItem.list.length">
						<view class="item" v-for="item in dataItem.list" :key="item.id" @click="views(item)">
							<view class="flex_sbc">
								<view class="z-font-32 u-line-1">课程：{{ item.name }}</view>
								<image
									:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
									class="icon-size-32"
									@click.stop="edit(item)"
								></image>
							</view>
							<view class="uni-mt-16">
								<view
									v-for="qu in item.questionSchemeList"
									:key="qu.id"
									class="z-font-24 uni-color-grey flex_fsc uni-mb-8"
								>
									<view class="u-line-1">{{ qu.name }}</view>
									<view class="z-font-20 uni-mx-10">|</view>
									<view class="flex_sh">
										解决方案{{ qu.schemeList ? qu.schemeList.length : 0 }}个
									</view>
								</view>
							</view>
						</view>
					</view>
					<z-no-data v-else width="400" placeholder="暂无课程"></z-no-data>
				</view>
				<view v-else-if="dindex === 1" class="box">
					<view class="title flex_sbc">
						<view>我的问题库</view>
						<view class="button" @click="edit()">新问题</view>
					</view>
					<view v-if="dataItem.list && dataItem.list.length">
						<view class="item" v-for="(item, qindex) in dataItem.list" :key="item.id">
							<view class="flex_sbc">
								<view class="z-font-32 u-line-1">{{ item.name }}</view>
								<image
									:src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'"
									class="icon-size-32"
									@click="edit(item)"
								></image>
							</view>
							<view class="uni-mt-16 z-font-24 uni-color-grey flex_fsc">
								<view class="uni-mr-40">关联解决方案：{{ item.relScheme.split(',').length - 1 }}</view>
								<view>关联课程：{{ item.relCourse.split(',').length - 1 }}</view>
							</view>
							<view>
								<view class="line-spacing uni-mt-24"></view>
								<view class="flex_cc uni-my-28">
									<view class="flex_cc" @click="relatedCourses(item, qindex)">
										<image
											:src="setting.oss_pub_domain + '/app-img/icon/icon-add.png'"
											class="icon-size-32"
										></image>
										<view class="uni-color-main uni-ml-16">添加到课程</view>
									</view>
									<view style="color: #e4e8e7" class="uni-mx-50">|</view>
									<view class="flex_cc" @click="associatedSolution(item, qindex)">
										<image
											:src="setting.oss_pub_domain + '/app-img/icon/icon_link.png'"
											class="icon-size-32"
										></image>
										<view class="uni-color-main uni-ml-16">关联解决方案</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<z-no-data v-else width="400" placeholder="暂无问题"></z-no-data>
				</view>
				<view v-else-if="dindex === 2" class="box">
					<!-- <view class="flex_sac" style="height: 88rpx;">
						<view class="flex_fsc" @click="tagStatus = !tagStatus">
							<view class="uni-mr-8" :class="{'uni-color-main': tagStatus}">全部标签</view>
							<image :src="`${setting.oss_pub_domain}/app-img/icon/icon_drop-${tagStatus ? 'up-main' : 'down'}.png`"
								class="icon-size-32"></image>
						</view>
						<view class="flex_fsc">
							<view class="uni-mr-8">智能排序</view>
							<image :src="setting.oss_pub_domain + '/app-img/icon/icon-screening-down.png'" class="icon-size-32"></image>
						</view>
						<view class="screening flex_cc">
							<view>筛选</view>
							<image src="${setting.oss_pub_domain}/app-img/player/icon_screening.png" class="icon-size-32"></image>
						</view>
					</view> -->
					<!-- <view class="flex_sbc uni-mx-32" style="height: 98rpx;">
						<view class="flex_fsc">
							<view class="tag">开球</view>
						</view>
						<view class="uni-color-main">重置</view>
					</view> -->
					<view class="line-spacing tag-height"></view>
					<view v-if="tagStatus" class="tag-box flex_fsc">
						<scroll-view class="left" :style="{ height: `calc(100vh - ${tagHeight}px - 16rpx)` }" scroll-y>
							<view class="left-item uni-color-main-bg uni-white">球杆</view>
							<view class="left-item" v-for="i in 10" :key="i">现象</view>
							<view class="left-item uni-color-main-bg uni-white">球杆</view>
						</scroll-view>
						<scroll-view class="right" :style="{ height: `calc(100vh - ${tagHeight}px)` }" scroll-y>
							<view v-for="i in 10" :key="i">
								<view class="z-font-32">木杆</view>
								<view class="flex_sbc flex_wrap uni-mb-40">
									<view class="right-item" style="border: 2rpx solid #008965">一号木</view>
									<view class="right-item">一号木</view>
									<view class="right-item" style="visibility: hidden"></view>
									<view class="right-item" style="visibility: hidden"></view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view v-else>
						<!-- <view class="create-plan" @click="edit()">新建方案</view> -->
						<view class="title flex_sbc">
							<view>我的方案库</view>
							<view class="button" @click="edit()">新建方案</view>
						</view>
						<view v-if="dataItem.list && dataItem.list.length">
							<view
								class="scheme-item flex_fsc"
								v-for="item in dataItem.list"
								:key="item.id"
								@click="views(item)"
							>
								<image
									:src="setting.oss_pub_domain + item.coverImage"
									mode="aspectFill"
									class="img"
								></image>
								<view>
									<view class="u-line-1 uni-mb-8" style="width: 520rpx">{{ item.name }}</view>
									<view class="u-line-2 z-font-24 uni-color-grey" style="width: 520rpx">
										{{ item.description }}
									</view>
								</view>
							</view>
						</view>
						<z-no-data v-else width="400" placeholder="暂无方案"></z-no-data>
					</view>
				</view>
			</scroll-view>
		</swiper-item>
	</swiper>
</template>

<script setup>
import { getQuestionList, getQuestionDetial, editQuestion } from '@/api/question';
import { getPlanList } from '@/api/plan';
import { getCourseList } from '@/api/course';
import { getSchemeList } from '@/api/scheme';
import { onShow, onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy: that } = getCurrentInstance();

const tabIndex = ref(0),
	left = ref(80),
	topHeight = ref(0),
	topTextObj = [{
		text: '课程库',
		left: 111
	}, {
		text: '问题库',
		left: 361
	}, {
		text: '方案库',
		left: 611
	}];

function switchTab(index) {
	if (tabIndex.value === index) return;
	tabIndex.value = index;
}

function changTabIndex(e) {
	switchTab(e.detail.current);
}

onLoad((opt) => {
	switchTab(parseInt(opt.type || 0));
});

onMounted(() => {
	uni.createSelectorQuery()
		.select('.tab-box')
		.boundingClientRect((data) => {
			topHeight.value = data.height;
		})
		.exec();
	for (let i = 0; i < 3; i++) {
		fetch(i);
	}
});

const data = reactive([
	{
		list: [],
		total: 0,
		pageSize: 10,
		pageNum: 1,
		fun: getCourseList,
		triggered: 'restore',
		_freshing: false
	},
	{
		list: [],
		total: 0,
		pageSize: 10,
		pageNum: 1,
		fun: getQuestionList,
		triggered: 'restore',
		_freshing: false
	},
	{
		list: [],
		total: 0,
		pageSize: 10,
		pageNum: 1,
		fun: getSchemeList,
		triggered: 'restore',
		_freshing: false
	}
]);

// 搜索
function searchData(name) {
	data[tabIndex.value];
	fetch(tabIndex.value, { name });
}
// 下一页
function nextPage(index) {
	if (data[index].list.length >= data[index].total) return;
	data[index].pageNum += 1;
	fetch(index);
}
// 获取数据
function fetch(index, query = {}) {
	console.log(index);
	data[index]
		.fun({
			pageNum: data[index].pageNum,
			pageSize: data[index].pageSize,
			...query
		})
		.then((res) => {
			if (data[index].pageNum === 1) {
				data[index].list = res.rows;
			} else {
				data[index].list.push(...res.rows);
			}
			data[index].total = res.total;
			data[tabIndex.value].triggered = false;
			data[tabIndex.value]._freshing = false;
		});
}
function onRefresh() {
	if (data[tabIndex.value]._freshing) return;
	data[tabIndex.value]._freshing = true;
	data[tabIndex.value].pageNum = 1;
	fetch(tabIndex.value);
}
function onRestore() {
	data[tabIndex.value].triggered = 'restore';
}
// ----------------------------------------------------------
const keyList = ['course', 'question', 'scheme'];
//  编辑
function edit(item) {
	const editUrl = [
		'/pages/course/edit/edit',
		'/pages/question/edit/edit',
		'/pages/scheme/add/add'
	];
	uni.setStorageSync('edit-' + keyList[tabIndex.value], item);
	uni.navigateTo({
		url: editUrl[tabIndex.value],
		events: {
			editDone: () => {
				data[tabIndex.value].pageNum = 1;
				onRefresh();
			}
		}
	});
}

// 查看详情
function views(item) {
	const viewUrl = ['/pages/system/course-details', '/pages/course/plan/plan', '/pages/scheme/details'];
	uni.setStorageSync('edit-' + keyList[tabIndex.value], item);
	uni.navigateTo({
		url: viewUrl[tabIndex.value],
		events: {
			editDone: () => {
				data[tabIndex.value].pageNum = 1;
				onRefresh();
			}
		}
	});
}

// 方案库 标签
const tagStatus = ref(0),
	tagHeight = ref(0);

// 问题库关联方案和课程

function updataQuestion(element, cdata, type, index) {
	const postData = {};
	postData[type[0]] = cdata.map((item) => item.id).join(',');
	editQuestion(postData, element.id).then((res) => {
		data[2].list[index][type[0]] = ',' + postData[type[0]];
		that.$forceUpdate();
		that.tools.alert('更新完成');
	});
}
// 关联方案
function associatedSolution(element, index) {
	uni.setStorageSync('questionCopy', element)
	getQuestionDetial(element.id).then((res) => {
		uni.setStorageSync('select-scheme', res.schemeList);
		uni.navigateTo({
			url: '/pages/scheme/course-select/course-select',
			events: {
				relScheme: (data) => {
					updataQuestion(res, data, ['relScheme', 'schemeList'], index);
				}
			}
		});
	});
}

// 关联课程
function relatedCourses(element, index) {
	getQuestionDetial(element.id).then((res) => {
		uni.setStorageSync('select-course', res.courseList);
		uni.navigateTo({
			url: '/pages/course/select/selects-single',
			events: {
				relCourse: (data) => {
					updataQuestion(res, data, ['relCourse', 'courseList'], index);
				}
			}
		});
	});
}
</script>

<style lang="scss">
page {
	background: $uni-F5F5F5;
}
</style>
<style lang="scss" scoped>
@import 'index.scss';
</style>
